<script>
export default {
  name: "withdrawalPopup",
  methods: {
    open() {
      this.$refs.popup.open();
    },
  },
};
</script>

<template>
  <uni-popup ref="popup">
    <view class="popup-content">
      <view class="content">
        <view class="title">扫描二维码添加客服</view>
        <image
          class="qr-code"
          :show-menu-by-longpress="true"
          src="https://kou.gdzmtech.com/pic/71d5aefa9d60fb0fb99ab619497e4ba.png"
        ></image>
        <view class="note" style="margin-top: 28rpx"
          >提供截图+手机号，联系客服</view
        >
        <view class="note">进行佣金结算</view>
      </view>
      <view class="close-btn-container">
        <image
          class="close-btn"
          src="/static/close_fill.png"
          @click="$refs.popup.close()"
        ></image>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  .content {
    background: linear-gradient(180deg, #fffae9 0%, #defff5 100%);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 48rpx 0;
    width: 518rpx;
    border-radius: 30rpx;
    .title {
      font-size: 44rpx;
      font-weight: 600;
      color: #00a15c;
    }
    .qr-code {
      width: 260rpx;
      height: 260rpx;
      margin-top: 30rpx;
      box-shadow: 0 0 8rpx 2rpx rgba(81, 148, 124, 0.2);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .note {
      font-size: 26rpx;
      color: #666666;
    }
  }
  .close-btn-container {
    display: flex;
    justify-content: center;
    .close-btn {
      width: 80rpx;
      height: 80rpx;
      opacity: 0.5;
      margin: {
        top: 40rpx;
      }
    }
  }
}
</style>
